﻿@model MobileWebsiteGenerator.Models.MainViewModel
           
           @{
                Layout = "~/Views/Shared/_Layout.cshtml";
           }

           @Html.HiddenFor(model=>model.MyTheme.theme_id)

<style type="text/css">
    #AllImages
    {
        border: 1px solid #000;
        border-radius: 10px;
        background-color: White;
        height: 500px;
    }
    .ImageContainer
    {
        margin: 5px;
        float: left;
        width: auto;
        display: none;
    }
    .ImageContainer img
    {
        border: 1px solid #000;
        padding: 5px;
        background-color: #999;
        border-radius: 10px;
    }
    .ImageContainer p
    {
        text-align: center;
        margin: 2px 0px;
    }
    .ImageContainer a
    {
        padding: 5px;
        background-color: Blue;
        border: 1px solid #000;
        border-radius: 10px;
        color: White;
        text-decoration: none;
    }
    .ImageContainer a:hover
    {
        text-decoration: underline;
    }
</style>
<script type="text/javascript">
    $(document).ready(
    function () {
        ImageTextboxID = '#backgroundImage';
        $("#fileuploader").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Bg Image',
            'script': 'Upload/1',
            'folder': '/uploads/Websites',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': true,
            'auto': true,
            'onComplete': function (event, ID, fileObj, response, data) {

                $(ImageTextboxID).attr("value", response);
            }
        });

        HeaderImageBoxID = '#HeaderImage';
        $("#fileuploaderheader").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Header Image',
            'script': '/BusinessSetting/Upload/2',
            'folder': '/uploads/Websites',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': true,
            'auto': true,
            'onComplete': function (event, ID, fileObj, response, data) {

                $(HeaderImageBoxID).attr("value", response);
            }

        });


        FooterImageBoxID = '#PlanAttributes_footerImage';
        $("#fileuploaderfooter").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Footer Image',
            'script': '/BusinessSetting/Upload/3',
            'folder': '/uploads/BusinessSettings',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': true,
            'auto': true,
            'onComplete': function (event, ID, fileObj, response, data) {

                $(FooterImageBoxID).attr("value", response);
            }
        });
    }
);


</script>
<script type="text/javascript">
    $(document).ready(function () {

        $('#headercolorCode').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#headercolorCode").css('backgroundColor', '#' + hex);
                $("#headercolorCode").html('#' + hex);
                $("#headercolorCode").attr("value", '#' + hex);
            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });
    });

    $(document).ready(function () {

        $('#background_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#background_color").css('backgroundColor', '#' + hex);
                $("#bgcolorCode").html('#' + hex);
                $("#background_color").attr("value", '#' + hex);
            }



        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);


        });

    });

    $(document).ready(function () {

        $('#footer_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#footer_color").css('backgroundColor', '#' + hex);
                $("#footercolorCode").html('#' + hex);
                $("#footer_color").attr("value", '#' + hex);

            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });


    });
 
 
</script>


<style type="text/css">
*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0;}

div.box {
margin:0 auto;
width:100%;
background:#222222;
position:inherit;
margin-top:-30px;

border:1px solid #262626;
}

div.box h4 { 
color:#E82D02;
font-size:16px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712; 
}

div.box label  {
width:100%;
display: block;
background:#1C1C1C;

border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}

#span {
display: block;
color:#FFF;
font-weight:bold;
font-size:14px;
margin-left:13%;

float:left;
width:100px;
text-align:right;
padding:5px 5px 0 0;
}
#star
{
    color:Red;
    }

div.box .input_text 
{
padding:10px 10px;
color:White;
margin-left:30px;

width:500px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}


div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#E82D02;
border:0px;
opacity:0.7;
position: relative;
top:5px;
left:67%;
color:White;
font-weight:bold;
width:100px;
border-radius:none;
}
div.box .button:hover
{
    opacity:1;
}


</style>



<script type="text/javascript">
    $(document).ready(function () {

        $('#headercolorCode').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#headercolorCode").css('backgroundColor', '#' + hex);
                $("#headercolorCode").html('#' + hex);
                $("#headercolorCode").attr("value", '#' + hex);
            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });
    });

    $(document).ready(function () {

        $('#background_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#background_color").css('backgroundColor', '#' + hex);
                $("#bgcolorCode").html('#' + hex);
                $("#background_color").attr("value", '#' + hex);
            }



        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);


        });

    });

    $(document).ready(function () {

        $('#footer_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#footer_color").css('backgroundColor', '#' + hex);
                $("#footercolorCode").html('#' + hex);
                $("#footer_color").attr("value", '#' + hex);

            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });


    });
 
 
</script>

<form action="/ThemeDetail/Select" method="post">

 
          <div class="box">

             <label>
              <span id="span">Header Text</span>
               <input type="text" class="input_text" value="@Html.DisplayFor(model=>model.MyTheme.HeaderText)" name="Password" id=""/>
            </label>
       

       
            <label>
              <span id="span">HeaderColor</span>
                <input class="input_text" id="footer_color" name="footer_color" type="text"
            value="@Html.DisplayFor(model=>model.MyTheme.Headercolor)" readonly="readonly" />
       
            </label>  <div id="footerColorCode"></div>



             <label>
              <span style="display:inline-table;" id="span">HeaderImage</span> 
              <table><tr><td> <input style="display:inline-table;" type="text" class="input_text" value="@Model.MyTheme.HeaderImage" readonly="readonly" name="" id="HeaderImage"/>
            </td><td><span style="display:inline-table;" id="fileuploaderheader"></span></td></tr></table>
            </label>         
             
              
    
             <label>
              <span id="span">BG Color</span>
              <input class="input_text" id="background_color" name="background_color"
            type="text" value="@Html.DisplayFor(model=>model.MyTheme.backgroundColor)" readonly="readonly" />
       
            </label> <div id="headerColorCode"></div>
             <label>
                  <span id="span">BG Image</span>
               <table><tr><td> <input type="text" id="backgroundImage" class="input_text" value="@Html.DisplayFor(model=>model.MyTheme.backgroundImage)" />
            </td><td>
                <span id="fileuploader"></span></td></table></label>
            <label>
     

                 <span id="span">Footer Text</span>
                <input type="text" class="input_text" value="@Html.DisplayFor(model=>model.MyTheme.Footertext)" name="" id=""/>
              
            </label>
        
              <input class="button" type="submit" value="Submit" />
            
         </div>





</form>
